<template>
  <view>
    <view class="fixed w-100 h-100 top0 left0 ov-hd-y">
      <Header />
      <swiper
        class="swiper w-100 h938"
        @change="change"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item v-for="item in list" :key="item.id">
          <ImageFile :url="item.thumbnail" className="w-100 h-100" />
        </swiper-item>
      </swiper>

      <SwiperBot
        class="re bottom176"
        :current="current"
        :list="list"
      ></SwiperBot>
      <view class="w-100 w-t-f re bg-f8ff h658 re">
        <view class="pt-4">
          <UserLogin></UserLogin>
        </view>
        <view class="w-100 px-4">
          <view class="w-100 f-b-c pt-4">
            <view
              class="w318 h258 bg-white circle52 show0"
              @click="get_url('close', 'ticket')"
            >
              <image class="w318 h258 p-3" src="../../static/icon_ticket.png" />
            </view>
            <view
              class="w318 h258 bg-white circle52 show0"
              @click="get_url('close', 'map')"
            >
              <image class="w318 h258 p-3" src="../../static/icon_map.png" />
            </view>
          </view>
          <view class="w-100 f-b-c mt-3 bg-white circle52 show0 px-3 h130 re">
            <!--    <view @click="get_url('to', 'food')">
              <image src="../../static/icon_home_1.png" class="w160 h94" />
            </view> -->
            <!-- 订餐暂时往工坊跳 -->
            <view @click="openWorker()">
              <image src="../../static/icon_home_1.png" class="w160 h94" />
            </view>
            <view class="ty-line ab left211"></view>
            <view @click="get_url('close', 'ticket', 'activity')">
              <image src="../../static/icon_home_2.png" class="w160 h94" />
            </view>
            <view class="ty-line ab left444"></view>
            <view @click="get_url('close', 'ticket', 'yeas_car')">
              <image src="../../static/icon_home_3.png" class="w160 h94" />
            </view>
          </view>
        </view>
        <Horn type="right-top" />
        <Horn type="right-bottom" />
      </view>
      <view class="w-100 h14" v-if="!height_show"></view>
    </view>
    <Footer index="home"></Footer>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Footer from "../../components/footer.vue"; //底部导航
import SwiperBot from "../../components/swiper-bot.vue"; // swiper面板
import Horn from "../../components/horn.vue"; // 转角
import UserLogin from "../../components/user_login.vue"; // 用户登录信息
import Header from "../../components/header.vue";
import ImageFile from "../../components/img_file.vue";

import { banner_list } from "../../api/mall.js";
export default {
  components: {
    Footer,
    SwiperBot,
    Horn,
    UserLogin,
    Header,
    ImageFile,
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 8000,
      duration: 500,
      list: [],
      current: 0,
      height_show: true, // 设计为一屏 按照812设置 低于这个高度 需要底部撑起来
    };
  },
  onLoad(val) {
    if (val.inviter) {
      uni.setStorageSync("inviter", val.inviter);
    }
  },
  computed: {
    ...mapState("user", ["isLogin"]),
  },
  watch: {
    isLogin() {
      if (this.isLogin) {
        this.get_banner_list();
      }
    },
  },
  created() {
    if (this.isLogin) {
      this.get_banner_list();
    }
    const { screenHeight } = uni.getStorageSync("systemInfo");
    //设计为一屏 按照812设置 低于这个高度 需要底部撑起来
    this.height_show = screenHeight >= 812;
  },
  methods: {
    change(e) {
      this.current = e.detail.current;
    },
    get_url(type, val, name) {
      switch (type) {
        case "to":
          // if(val == 'food'){
          // 	 return uni.showToast({
          // 	 	title:"暂未开放",
          // 		icon:"none"
          // 	 })
          // }
          uni.navigateTo({
            url: `/pages/${val}/${val}`,
          });
          break;
        case "close":
          uni.redirectTo({
            url: `/pages/${val}/index`,
          });
          // tab切换使用
          if (name) {
            uni.setStorageSync("nav_code", name);
          }
      }
    },
    async get_banner_list() {
      const { code, body } = await banner_list({ goodsType: "ACTIVITY" });
      if (code === "0") {
        this.list = body.records.filter((item) => item.enabled);
      }
    },
    openWorker() {
      uni.showToast({
        title: "暂未开放",
        icon: "none",
      });
      return;
      uni.setStorageSync("nav_code", "workshop");
    },
  },
};
</script>
<style scoped lang="scss">
.swiper {
  image {
    width: 100%;
    height: 100%;
  }
}
.h938 {
  height: 938rpx;
  z-index: 9;
  position: relative;
}
.w-t-f {
  top: -166rpx;
  border-radius: 108rpx 0 0 108rpx;
  z-index: 88;
}
.ty-line {
  width: 1rpx;
  height: 68rpx;
  top: 32rpx;
  background: #ccc;
}
</style>
